


import React, { useEffect,useRef,useState } from 'react';
import { ajax } from './../utils/ajax';
// useEffect 
// useEffect方法是在每次渲染之后执行，
// 可以理解为class写法中的 componentDidMount / componentDidUpdate / componentWillUnmount

// useEffect  第一个参数 是回调函数
// 第二个参数 不写 任何数据改变都能进来 
// 第二个参数 [] 不传参数 任何状态的改变都不会执行    [text]  只有你修改text 才会执行 

const Hooks3 = () => {


    const [num,setNum] = useState(1200)
    const [word,setWord]  = useState("Are you oK")
    const [flag,setFlag] = useState(true) 
    const inp = useRef()

    useEffect(()=>{
        console.log("组件初始化 - useEffect - componentDidMount  +  componentDidUpdate")
    },[word])   // watch 

    useEffect(()=>{
        console.log("2114 - 精通React ")
    },[])

    const changeWord = e=>{
        setWord(inp.current.value )
    }
    return (
        <div>
            <h2>useEffect hooks 重要钩子函数 </h2>
            <h2>num --- {num }  </h2>
            <h2>word -- {word}</h2>
            <hr/>
            <button onClick={()=>setNum(num+100) }>点击修改数据 num  </button>
            <p>
                <input type="text"  ref={inp} value={word} onChange={changeWord }/>
            </p>
            <button onClick={()=>setFlag(!flag)  }>点击切换flag  </button>
            <hr/>
            {flag ? <ChildOne/> : null  }
        </div>
    );
}

const ChildOne = ()=>{

    
    const [movie,setMovie] = useState([])
    const getMovieList = async ()=>{
        let res = await ajax.get("http://localhost:3000/movie")
        setMovie(res.data.result)
    }
    useEffect(()=>{
        console.log("childone 初始化 ")
        getMovieList()

        // 销毁的时候会执行
        return ()=>{
            console.log('componentWillUnmount  - 组件被销毁了... ')
        }
    },[])
   return (
       <div>
           <h2>
           ChildOne - ChildOne -ChildOne 
           </h2>
           {
               movie.map((l,i)=>(
                   <p key={i}> {l.title} -- {l.year }  </p>
               ))
           }
       </div>
   ) 
}

export default Hooks3;
